import React from 'react';
//react-router;
import {Link} from 'react-router';
import classnames from 'classnames';

import {Tooltip} from 'antd';

//component
import ReIcon from '../ReIcon';
import ReAvatar from '../ReAvatar';
import ReLink from '../ReLink';

import './index.less';

export default class view extends React.Component {
    static propTypes = {
        src: React.PropTypes.string,
        title: React.PropTypes.string,
        onSrcClick: React.PropTypes.func,
        onTitleClick: React.PropTypes.func,
        showHeaderToolBar: React.PropTypes.bool,
        isGallery: React.PropTypes.bool,
    };

    static defaultProps = {
        src: '/assets/images/components/widgets/ReCard/images/label.png',
        title: '',
        showHeaderToolBar: false,
        isGallery: false,
        onTitleClick: () => {
        },
        onSrcClick: () => {
        },
    }

    constructor(props, context) {

        super(props, context);
        // init state;

        this.state = {
            src: props.src,
            title: props.title,
            total: props.total,
            showPopMenu: false,
            recordId: 0,
        };
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            src: nextProps.src,
            title: nextProps.title,
            total: nextProps.total,
        });
    }

    componentWillMount() {
        this._isMounted = true;
    }

    componentDidMount() {

    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    renderHeaderToolPopMenu() {
        const {popMenuOption} = this.props;
        if (popMenuOption.length) {
            let _this = this;
            let popMenuOptionDom = popMenuOption.map(function(item, index) {
                return (
                    !item.hide &&
                    <li key={index} onClick={_this.popMenuItemClick.bind(_this, item)}>
                        {item.name}
                    </li>
                )
            });
            return (
                <ul className="head-tool-popmenu">
                    {popMenuOptionDom}
                </ul>
            )
        }
    }

    giveLike(e, id) {
        this.props.giveLikeClick(e);
        this.setState({
            recordId: id
        });
    }

    collect(e, id) {
        this.props.collectClick(e);
        this.setState({
            recordId: id
        });
    }

    render() {
        const {
            showHeaderTool, showPlayMask, noTitle, notHeight, showSelect, isChecked, isShowed,
            cantChecked, isFolder, folderCoverArr, social, data, isExhibition, socialNotAvatar,
            onAvatarClick, isVideo, isTutorial, registerVersion, avatarSrc, noHoverSelect,isArtworks,
            isGallery, userType
        } = this.props;
        let typeImg = userType === 2 ? '/assets/images/components/widgets/ReCard/images/defaultorg.png' : '/assets/images/components/widgets/ReCard/images/defaultportrait.png';
        const in_cabinet = this.state.in_cabinet;
        let imageWrapperClass = classnames({
            'gradient': true,
            'video': isVideo,
            'has-height': !notHeight
        })
        return (
            <div ref={e => this.recard = e}
                 className={(isFolder ? 'ori-recard-root no-box-shadow' : 'ori-recard-root ') +
                 (this.props.className ? this.props.className : '')}>
                {/*{*/}
                {/*showSelect &&*/}
                {/*<div className={isChecked ? 'select-box-phone is-checked' : 'select-box-phone'} onClick={(e) => {*/}
                {/*e.preventDefault();*/}
                {/*e.stopPropagation();*/}
                {/*this.props.onSelectClick && this.props.onSelectClick();*/}
                {/*}}>*/}
                {/*<div*/}
                {/*className={isChecked ? 'my-checkbox checked' : cantChecked ? 'my-checkbox can-not-check' : 'my-checkbox'}>*/}
                {/*<ReIcon icon="define" className="my-checkbox-icon"/>*/}
                {/*</div>*/}
                {/*</div>*/}
                {/*}*/}


                <div className="card-pic" id="card-item" onMouseLeave={(e) => this.setState({showPopMenu: false})}>
                    {showSelect ?
                        <div className={isChecked ? 'select-box mask is-checked' : 'select-box mask'} onClick={(e) =>
                            this.props.onSelectClick(e)}>
                            <div
                                className={isChecked ? 'my-checkbox checked' : cantChecked ? 'my-checkbox can-not-check' : 'my-checkbox'}>
                                <ReIcon icon="define" className="my-checkbox-icon"/>
                            </div>
                        </div>
                        :
                        (!noHoverSelect &&
                            <div className={isChecked ? 'select-box is-checked' : 'select-box'} onClick={(e) =>
                                this.props.onSelectClick(e)}>
                                <div
                                    className={isChecked ? 'my-checkbox checked' : cantChecked ? 'my-checkbox can-not-check' : 'my-checkbox'}>
                                    <ReIcon icon="define" className="my-checkbox-icon"/>
                                </div>
                            </div>
                        )
                    }
                    {
                        showHeaderTool &&
                        <div className="head-tool-bar" onClick={this.handleSetClick.bind(this)}>
                            <span><ReIcon icon="shezhi"></ReIcon></span>
                        </div>
                    }
                    {
                        !isExhibition === false &&
                        <span className="left-top-exhibition">{isExhibition}</span>
                    }
                    {
                        showHeaderTool && this.state.showPopMenu &&
                        this.renderHeaderToolPopMenu()
                    }
                    <div
                        className={imageWrapperClass}
                        onClick={(e) => this.props.onSrcClick && this.props.onSrcClick(e)}>

                        {
                            isFolder ?
                                <div className="card-pic-folder">
                                    <div className="fold-wrapper">
                                        <ReIcon className="icon-folder" icon="wenjianjia"/>
                                    </div>

                                </div>
                                :
                                <img className="card-pic-img"
                                     onLoad={() => this.onImageLoaded()}
                                     src={this.state.src ? this.state.src : (isGallery ? typeImg : '/assets/images/components/widgets/ReCard/images/label.png')}
                                     alt=""/>
                        }
                        {
                            registerVersion &&
                            <div className="card-version-wrapper">
                                <span className="card-version-icon">
                                <ReIcon icon="jiandingzhengshu" className="version-cion"/>
                                </span>
                                <span className="card-version">版权认证</span>
                            </div>
                        }
                        {
                            !isFolder && isVideo &&
                            <div className="video-mask">
                                <ReIcon icon="shipin1" className="video-icon"/>
                            </div>

                        }
                        {
                            isTutorial &&
                            <div className="video-mask">
                                <ReIcon icon="bofang" className="tutorial-icon"/>
                            </div>

                        }

                    </div>
                    {
                        !noTitle &&
                        <div className="card-text-container pc">
                            <div className={this.props.titleCenter ? 'card-title text-center' : 'card-title'}
                                 onClick={(e) => this.props.onTitleClick && this.props.onTitleClick(e)}>
                                {this.state.title}
                            </div>
                            {
                                isShowed &&
                                <Tooltip placement="bottom" title={$$.LN.IS_SHOWED}>
                                    <div className="is-showed">
                                        <ReIcon icon="exhibitors"/>
                                    </div>
                                </Tooltip>
                            }
                        </div>
                    }
                    {
                        !noTitle &&
                        <div className="card-text-container-phone">
                            <div className={this.props.titleCenter ? 'card-title text-center' : 'card-title'}
                                 onClick={(e) => this.props.onTitleClick && this.props.onTitleClick(e)}>
                                {this.state.title}
                            </div>
                            {
                                isArtworks &&
                                <div className="set-wrapper" onClick={(e) => this.props.phoneSettingClick(e)}>
                                    <ReIcon icon="gengduo11" classname="icon"/>
                                </div>
                            }
                        </div>
                    }
                    {
                        isFolder &&
                            <div className="art-count">
                                <div className="count-wrapper">
                                    <ReIcon className="icon-folder" icon="work"/>
                                    <span className="text">{this.state.total || 0}</span>
                                </div>
                            </div>
                    }
                    {
                        social &&
                        <div className="card-text-container social">
                            <div className="avatar" onClick={(e) => onAvatarClick()}>
                                {!socialNotAvatar &&
                                <ReAvatar className="user-avatar" src={avatarSrc} size={100}/>
                                }
                                {!socialNotAvatar &&
                                <p className="user-name">
                                    <span>{data.userName}</span>
                                </p>
                                }
                            </div>
                            <div className="give-like-wrapper">
                                <Tooltip placement="bottom"
                                        title={data.collectionType ? $$.LN.CANCEL_COLLECT : $$.LN.COLLECT}>
                                    <span className={data.collectionType ? 'give-like-btn collect' : 'give-like-btn'}
                                        onClick={(e) => this.collect(e, data.id)}>
                                    <ReIcon className="icon" t
                                            icon={data.collectionType ? 'yishoucang' : 'shoucang'}/>
                                    </span>
                                </Tooltip>
                                <span className="give-like-number">
                                {data.collectionNumber || 0}
                                </span>
                            </div>
                            <div className="give-like-wrapper">

                                <Tooltip placement="bottom"
                                        title={data.giveLikeType ? $$.LN.CANCEL_AGREE : $$.LN.AGREE}>
                                    <span className={data.giveLikeType ? 'give-like-btn give' : 'give-like-btn'}
                                        onClick={(e) => this.giveLike(e, data.id)}>
                                        <ReIcon className="icon"
                                                icon={data.giveLikeType ? 'zan' : 'icon_zan'}/>
                                    </span>
                                </Tooltip>
                                <span className="give-like-number">
                                    {data.giveLike || 0}
                                </span>
                            </div>
                        </div>
                    }
                    {
                        isGallery &&
                        <div className="card-text-container gallery">
                            <div className="addr">{`${data.countries ? data.countries : ''}${data.province ? data.province : ''}${data.city ? data.city : ''}`}</div>
                            <div className="exhibition-info">
                                <span className="fans">{`展览 ${data.showCount ? data.showCount : 0} | 粉丝 ${data.fansCount ? data.fansCount : 0 }`}</span>
                                <div className="follow-btn">
                                    <span className={data.focusType ? 'followed': 'follow'} onClick={(e) => this.props.handleFollow(e)}>{data.focusType ? '取消关注' : '+关注'}</span>
                                    {/* {data.focusType && <span className={data.focusType ? 'cancel-follow' : "cancel"} onClick={(e) => this.props.handleFollow(e)}>取消关注</span>} */}
                                </div>
                            </div>
                        </div>
                    }
                </div>
                {/*{*/}
                {/*isFolder &&*/}
                {/*<div className="folder-bottom">*/}
                {/*<div className="folder-bottom-top"></div>*/}
                {/*<div className="folder-bottom-bottom"></div>*/}
                {/*</div>*/}
                {/*}*/}
            </div>
        );
    }

    handleSetClick(event) {
        $$.utils.preventDefault(event);
        this.setState({
            showPopMenu: !this.state.showPopMenu
        });
        return false;
    }

    onImageLoaded() {
        const {onMeasured} = this.props;
        onMeasured && (typeof(onMeasured) === 'function') && onMeasured(this.recard);
    }

    popMenuItemClick(item, event) {
        $$.utils.preventDefault(event);
        this.setState({
            showPopMenu: false
        });
        item.func && (typeof(item.func) === 'function') && item.func();
        return false;
    }
}
